<template>
	<span :class="status">
		<slot />
	</span>
</template>

<script>
	export default {
		name: 'StatusTag',
		props: {
			type: {
				type: String,
				default: ''
			},
			value: {
				type: [String, Number, Boolean],
				default: ''
			}
		},
		data() {
			return {}
		},
		computed: {
			status() {
				if (this.type !== '' && this.value !== '') {
					return ['status-tag', this.type + '_' + this.value]
				} else {
					return ''
				}
			}
		},
		created() {},
		mounted() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.status-tag {
		padding: 3px 5px;
		color: white;
	}

	.normal_0 {
		background-color: #abbac3;
	}

	.normal_1 {
		background-color: #06a34e;
	}

	.normal_2 {
		background-color: #dc7d0c;
	}

	.normal_3 {
		background-color: #ed3c13;
	}

	.normal_4 {
		background-color: #06a34e;
	}

	.normal_5 {
		background-color: #dc7d0c;
	}

	.normal_6 {
		background-color: #ed3c13;
	}

	.pass_0 {
		background-color: #abbac3;
	}

	.pass_1 {
		background-color: #dc7d0c;
	}

	.pass_2 {
		background-color: #06a34e;
	}

	.process_-30,
	.process_30 {
		background-color: #777;
	}

	.process_0 {
		background-color: #d9a816;
	}

	.process_10 {
		background-color: #dc7d0c;
	}

	.process_11 {
		background-color: #ed3c13;
	}

	.process_20 {
		background-color: #0aa34e;
	}

	.status_0 {
		background-color: #FFF7DC;
		color: #EAA400;
	}

	.status_1 {
		background-color: rgb(103, 194, 58);
		color: #F56C6C;
	}
</style>